Quarto und Revealjs

Eine kurze Einführung

Prof. Dr. Jörg große Schlarmann

Fachbereich Gesundheitsweisen
MHC M3 Spezialwissen 2022
11.10.2021 | MHC

Quarto und RevealJS

Dies ist eine Vorlage für Folien im HSNR-Design, die mittels quarto und revealjs gerendert werden.

Allgemeine Informationen finden Sie unter

HSNR-Vorlage

Alle notwendigen Dateien befinden sich im Unterordner HSNRtheme.

Neben den notwendigen Bilddateien liegen hier:

  • apa-single-spaced.csl - die APA-Zitationsvorlage
  • HSNR.scss - die SCSS-Datei mit allen Farb- und Stylingangaben.

Im Ordner images liegen die Bilddateien der eigentlichen Präsentation. Dieser Ordner gehört nicht zur Vorlage, sondern ändert sich von Präsentation zu Präsentation.

Zwischentitel

Die Vorlage bietet zwei “Zwischentitel” an,

  • {.zwischentitel1}, im dunklen HSNR-Blauton
  • {.zwischentitel2}, im hellen HSNR-Blauton

Test

Dies ist ein Zwischentitel
im dunklen HSNR-Blauton

Dies ist ein Zwischentitel
im hellen HSNR-Blauton

Klasse {.r-fit-text}

Zusammen mit den Klassen {.r-fit-text} und {.center} sieht es dann so aus (nächste Folie)…

Dies ist ein
Zwischentitel

Farben

Das Theme stellt die die Blautöne der HSNR über die Klassen {.HSNRblue1} und {.HSNRblue2} zur Verfügung.

  • Dies ist HSNRblue1
  • Dies ist HSNRblue2

Dies funktioniert auch als Hintergrundfarbe, wenn ein bg- vor den Klassennamen geschrieben wird.

  • Dies ist .bg-HSNRblue1
  • Dies ist .bg-HSNRblue2

weitere Farben

Folgende weitere Farben sind im Theme enthalten:

.gray .silver .light-silver .moon-gray .light-gray .near-white .white .dark-red .red .light-red .orange .gold .yellow .light-yellow .light-purple .dark-pink .hot-pink .pink .light-pink .dark-green .green .light-green .light-blue .lightest-blue .washed-blue .washed-green .washed-yellow .washed-red .black .near-black .dark-gray .mid-gray .dark-red .red .purple .light-purple .dark-pink .dark-green .navy .dark-blue .blue

Tango-Farben:

.Tbluedark .Tblue .Tbluelight .Tbrown .Tbrowndark .Tbrownlight .Tgray .Tgraydark .Tgraylight .Tgraylight2 .Tgraylight3 .Tgreen .Tgreendark .Tgreenlight .Tred .Treddark .Tredlight .Tlilac .Tlilacdark .Tlilaclight .Tyellow .Tyellowdark .Tyellowlight .Torange .Torangedark .Torangelight

Die Farben stehen auch als Hintergrundfarben zur Verfügung. Hierfür schreiben Sie einfach ein bg- vor den Farbnamen, also z.B. {.bg-hot-pink}

Shadow-Text

Das Theme enthält folgende Schattierungsklassen:

  • .shadow-hsnr1
  • .shadow-hsnr2
  • .shadow-black
  • .shadow-silver
  • .shadow-grau

Shadow-Box

Die Klasse {.shadow-box} erzeugt eine schattige Kiste

Ich habe ’nen Schatten

Boxen

Die Klasse {.instructions} erzeugt eine umrandete Kiste


Ich bin eine Box

mit eigenem Source-Code-Style

Boxen

Weitere Boxen werden über die Klasse {.blankbox} erzeugt.


Ich bin eine Blankbox

Ich bin eine Blankbox mit .bg-HSNRblue2

Ich bin eine Blankbox mit .bg-light-blue und .white

Floating Shadow Images


Über die Klassen {.float-left}, {.float-right} und {.shadow-img} können Bilder nach links oder rechts floaten, und sie erhalten einen schattierten Rahmen.

Zentrieren

Mittels der Klasse {.tc} können Inhalte zentriert werden

Wau Holland (✝ 2001)

Ich bin ein zentrierter Text!

Größen (Text)

Mittels der Klasse {.size0} bis {.size150} kann die Größe der Schrift beeinflusst werden:

Dieser Text ist .size20

Dieser Text ist .size30

Dieser Text ist .size40

Dieser Text ist .size50

Größen (Bilder)

Mittels der Klasse {.figw10} bis {.figw1000} kann die Größe von Bildern beeinflusst werden:

Timer

Es stehen Timer (Countdowns) zur Verfügung.

Allerdings müssen diese mit reinem HTML hinzugefügt werden:

<div id="EINDEUTIGE-ID"></div>
<script src="HSNRtheme/timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("EINDEUTIGE-ID", SEKUNDEN); 
    });
</script>
Bitte 4 Minuten warten
<div id="4minWarten"></div>
<script src="HSNRtheme/timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("4minWarten", 240); 
    });
</script>

Bitte 4 Minuten warten

Ergänzen Sie eine eindeutige ID sowie die gewünschten Sekunden.

Timerbeispiele (Seite evtl. neu laden)

<div id="timer9a"></div>
<script src="HSNRtheme/timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("timer9a", 540);
    });
</script>
<div id="timer9b"></div>
<script src="HSNRtheme/timer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        initializeTimer("timer9b", 30); 
    });
</script>

Letzte Folie

Die letzten zwei Folien bilden die “Vielen-Dank-Karte” sowie die verwendete Literatur. (weiterklicken, um die letzten 2 Folien zu sehen)

VIELEN DANK!







Prof. Dr. Jörg große Schlarmann
Hochschule Niederrhein
Fachbereich Gesundheitswesen joerg.grosseschlarmann@hs-niederrhein.de

Prof. Dr. Jörg große Schlarmann
Hochschule Niederrhein
Fachbereich Gesundheitswesen joerg.grosseschlarmann@hs-niederrhein.de

große Schlarmann, J. (2024). Statistik mit R und RStudio - Ein Nachschlagewerk für Gesundheitsberufe. Hochschule Niederrhein. https://www.produnis.de/R
R Core Team. (2022). R: A language and environment for statistical computing. R Foundation for Statistical Computing. https://www.R-project.org/
Wickham, H. (2014). Tidy Data. Journal of Statistical Software, 59(10). https://doi.org/10.18637/jss.v059.i10
Wickham, H., & Grolemund, G. (2017). R for Data Science. O’Reilly Media. https://r4ds.had.co.nz/